<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>车票查询</span>
        </div>
        <div class="filter-container">
          <!-- 车票编号 -->
          <el-form label-width="80px" :label-position="labelPosition">
            <el-form-item label="车票编号">
              <el-input
                v-model="listQuery.cpbh"
                style="width: 200px"
                clearable
                @keydown.enter.native="Chaxun()"
              />
            </el-form-item>
          </el-form>
          <!-- 车票编号  end -->
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>当前车票信息</span>
        </div>
        <div class="filter-container">
          <el-form :inline="true" ref="form" :model="form" label-width="80px">
            <el-form-item label="线路编号">
              <el-input
                v-model="form.xlbh"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="发车时间">
              <el-input
                v-model="form.fcsh"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="检票状态">
              <el-input
                v-model="form.jpzt"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
          </el-form>
          <el-form :inline="true" ref="form" :model="form" label-width="80px">
            <el-form-item label="目的站名">
              <el-input
                v-model="form.mdzm"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="车票类型">
              <el-input
                v-model="form.cplx"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="售票时间">
              <el-input
                v-model="form.spsj"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
          </el-form>
          <el-form :inline="true" ref="form" :model="form" label-width="80px">
            <el-form-item label="票价">
              <el-input
                v-model="form.pj"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="车票状态">
              <el-input
                v-model="form.cpzt"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="报班卡号">
              <el-input
                v-model="form.bbkh"
                style="width: 200px"
                :disabled="true"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>当前车票详细信息</span>
        </div>
        <div class="filter-container">
          <el-table :data="table" border style="width: 100%" v-if="isShow">
            <el-table-column prop="cplx" label="车票类型" width="90" />
            <el-table-column prop="mdcz" label="目的车站" width="90" />
            <el-table-column prop="spsj" label="售票时间" width="140" />
            <el-table-column prop="fcsj" label="发车时间" width="140" />
            <el-table-column prop="cpzt" label="车票状态" width="90" />
            <el-table-column prop="pj" label="票价" width="80" />
            <el-table-column prop="spy" label="退票员" width="90" />
            <el-table-column prop="cptk" label="车票退款" width="90" />
            <el-table-column prop="jpzt" label="检票状态" width="90" />
            <el-table-column prop="xlbh" label="线路编号" width="90" />
            <el-table-column prop="ssgs" label="所属公司" width="90" />
            <el-table-column prop="bbkh" label="报班卡号" width="120" />
          </el-table>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getTicketList } from "@/api/jianpiao";
export default {
  name: "Chaxun",
  data() {
    return {
      listQuery: {
        cpbh: "",
      },
      isShow: false,
      labelPosition: "left",
      form: {},
      table: [
        {
          cplx: "",
          mdcz: "",
          spsj: "",
          fcsj: "",
          cpzt: "",
          pj: "",
          spy: "",
          cptk: "",
          jpzt: "",
          xlbh: "",
          ssgs: "",
          bbkh: "",
        },
        // {
        //   cplx: "",
        //   mdcz: "",
        //   spsj: "",
        //   fcsj: "",
        //   cpzt: "",
        //   pj: "",
        //   spy: "",
        //   cptk: "",
        //   jpzt: "",
        //   xlbh: "",
        //   ssgs: "",
        //   bbkh: "",
        // },
      ],
    };
  },
  watch: {},
  methods: {
    Chaxun() {
      this.isShow = false;
      this.getList();
    },
    getList() {
      const tempData = Object.assign({}, this.listQuery);
      getTicketList(tempData)
        .then((res) => {
          console.log("获取到的数据", res.data);
          const getData = res.data;
          this.form = {
            xlbh: getData.xlbh,
            // fcsj:
            jpzt: getData.sfjp,
            mdzm: getData.mdcz,
            // spsj:
            cplx: getData.cplx,
            // pj:
            cpzt: getData.cpzt,
            bbkh: getData.bbkh,
          };
          console.log("表单数据", this.form);
          this.table[0] = {
            cplx: getData.cplx,
            mdcz: getData.mdcz,
            // spsj: getData.spsj,
            // fcsj: getData.fcsj,
            cpzt: getData.cpzt,
            // pj: getData.pj,
            spy: getData.spy,
            cptk: getData.tgpy,
            jpzt: getData.sfjp,
            xlbh: getData.xlbh,
            ssgs: getData.ssgs,
            bbkh: getData.bbkh,
          };
          this.isShow = true;
          console.log(this.table);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    // this.Chaxun();
  },
};
</script>

<style scoped>
.box-card {
  margin-bottom: 10px;
}
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
</style>

